<template>
  <div class="list-container">
    <div class="main-wrapper">
      <custom-table :data="listData" :columns="columns">
        <template slot-scope="{ row }">
          <el-button type="text" @click="getDetail(row.applyId)">查看详情</el-button>
        </template>
      </custom-table>
      <pagination :total="total" :page="listQuery.pager.page" @pagination="pagination" />
    </div>

    <el-dialog :visible.sync="dialogVisible" width="600px">
      <div v-if="dialogList" class="matgin30">
        <el-form ref="file-form" class="teaching-form" :model="dialogList">
          <el-form-item class="marginT30">
            <el-col :span="3">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="50" :src="dialogList.avatarUrl" />
                </div>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="line-height30">{{ dialogList.nickname }}</div>
              <div class="line-height20">{{ dialogList.titleUrl }} | {{ dialogList.schoolName }}</div>
            </el-col>
            <el-col :span="4" :offset="4">
              <el-button type="primary" @click="getUserDetail(dialogList.userId)">查看用户详情</el-button>
            </el-col>
          </el-form-item>
          <el-form-item>
            <div class="fs-18 line-height50" style="border-bottom: 1px solid #EAEDF3">审核内容</div>
          </el-form-item>

          <!-- STUDENT_CERT  学生证 -->
          <el-form-item v-if="dialogList.type === 'STUDENT_CERT'">
            <div v-if="JSON.stringify(dialogList.originalContent) !== '{}'">
              <div class="h5">原内容</div>
              <el-col :span="12">
                <div v-if="dialogList.originalContent.studentCertUrl" class="block">
                  <el-image :src="dialogList.originalContent.studentCertUrl" fit="cover" />
                </div>
              </el-col>
            </div>
          </el-form-item>
          <el-form-item v-if="dialogList.type === 'STUDENT_CERT'">
            <div v-if="JSON.stringify(dialogList.auditContent) !== '{}'">
              <div class="h5">审核内容</div>
              <el-col :span="12">
                <div v-if="dialogList.auditContent.studentCertUrl" class="block">
                  <el-image :src="dialogList.auditContent.studentCertUrl" fit="cover" />
                </div>
              </el-col>
            </div>
          </el-form-item>

          <!-- TEACHER_CERT  教师证 -->
          <el-form-item v-if="dialogList.type === 'TEACHER_CERT'">
            <div v-if="JSON.stringify(dialogList.originalContent) !== '{}'">
              <div class="h5">原内容</div>
              <el-col :span="12">
                <div v-if="dialogList.originalContent.teacherCertUrl" class="block">
                  <el-image :src="dialogList.originalContent.teacherCertUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="16">
                <div class="block">
                  <div>教师编号：{{ dialogList.originalContent.teacherCertCode }}</div>
                  <div v-if="dialogList.originalContent.title === 'PRIMARY'">小学</div>
                  <div v-if="dialogList.originalContent.title === 'JUNIOR_MIDDLE'">初中</div>
                  <div v-if="dialogList.originalContent.title === 'SENIOR_MIDDLE'">高中</div>
                  <div v-if="dialogList.originalContent.title === 'UNIVERSITY'">大学</div>
                </div>
              </el-col>
            </div>
          </el-form-item>
          <el-form-item v-if="dialogList.type === 'TEACHER_CERT'">
            <div v-if="JSON.stringify(dialogList.auditContent) !== '{}'">
              <div class="h5">审核内容</div>
              <el-col :span="12">
                <div v-if="dialogList.auditContent.teacherCertUrl" class="block">
                  <el-image :src="dialogList.auditContent.teacherCertUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="16">
                <div class="block">
                  <div>教师编号：{{ dialogList.auditContent.teacherCertCode }}</div>
                  <div v-if="dialogList.originalContent.title === 'PRIMARY'">小学</div>
                  <div v-if="dialogList.originalContent.title === 'JUNIOR_MIDDLE'">初中</div>
                  <div v-if="dialogList.originalContent.title === 'SENIOR_MIDDLE'">高中</div>
                  <div v-if="dialogList.originalContent.title === 'UNIVERSITY'">大学</div>
                </div>
              </el-col>
            </div>
          </el-form-item>

          <!-- TITLE_CERT  职称证 -->
          <el-form-item v-if="dialogList.type === 'TITLE_CERT'">
            <div v-if="JSON.stringify(dialogList.originalContent) !== '{}'">
              <div class="h5">原内容</div>
              <el-col :span="12">
                <div v-if="dialogList.originalContent.titleCertUrl" class="block">
                  <el-image :src="dialogList.originalContent.titleCertUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="16">
                <div class="block">
                  <div>职称编号：{{ dialogList.originalContent.titleCertCode }}</div>
                  <div v-if="dialogList.originalContent.title === 'PRIMARY'">级别：一级</div>
                  <div v-if="dialogList.originalContent.title === 'SECONDARY'">级别：二级</div>
                  <div v-if="dialogList.originalContent.title === 'TERTIARY'">级别：三级</div>
                  <div v-if="dialogList.originalContent.title === 'SENIOR'">级别：高级</div>
                  <div
                    v-if="
                      dialogList.originalContent.title === 'POSITIVE_SENIOR'
                    "
                  >级别：正高级</div>
                </div>
              </el-col>
            </div>
          </el-form-item>
          <el-form-item v-if="dialogList.type === 'TITLE_CERT'">
            <div v-if="JSON.stringify(dialogList.auditContent) !== '{}'">
              <div class="h5">审核内容</div>
              <el-col :span="12">
                <div v-if="dialogList.auditContent.titleCertUrl" class="block">
                  <el-image :src="dialogList.auditContent.titleCertUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="16">
                <div class="block">
                  <div>职称编号：{{ dialogList.auditContent.titleCertCode }}</div>
                  <div v-if="dialogList.auditContent.title === 'PRIMARY'">级别：一级</div>
                  <div v-if="dialogList.auditContent.title === 'SECONDARY'">级别：二级</div>
                  <div v-if="dialogList.auditContent.title === 'TERTIARY'">级别：三级</div>
                  <div v-if="dialogList.auditContent.title === 'SENIOR'">级别：高级</div>
                  <div v-if="dialogList.auditContent.title === 'POSITIVE_SENIOR'">级别：正高级</div>
                </div>
              </el-col>
            </div>
          </el-form-item>

          <!-- IDCARD  身份证 -->
          <el-form-item v-if="dialogList.type === 'IDCARD'">
            <div v-if="JSON.stringify(dialogList.originalContent) !== '{}'">
              <div class="h5">原内容</div>
              <el-col :span="10">
                <div v-if="dialogList.originalContent.idcardFrontUrl" class="block">
                  <el-image :src="dialogList.originalContent.idcardFrontUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="10" :offset="2">
                <div v-if="dialogList.originalContent.idcardBackUrl" class="block">
                  <el-image :src="dialogList.originalContent.idcardBackUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="24">
                <div class="h5">真实姓名：{{ dialogList.originalContent.realName }}</div>
                <div class="h5">身份证号：{{ dialogList.originalContent.idcardNumber }}</div>
              </el-col>
              <!-- <el-col :span="16">
                <div class="block">
                  <div>编号编号</div>
                  <div>级别级别</div>
                </div>
              </el-col>-->
            </div>
          </el-form-item>
          <el-form-item v-if="dialogList.type === 'IDCARD'">
            <div v-if="JSON.stringify(dialogList.auditContent) !== '{}'">
              <div class="h5">审核内容</div>
              <el-col :span="10">
                <div v-if="dialogList.auditContent.idcardFrontUrl" class="block">
                  <el-image :src="dialogList.auditContent.idcardFrontUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="10" :offset="2">
                <div v-if="dialogList.auditContent.idcardBackUrl" class="block">
                  <el-image :src="dialogList.auditContent.idcardBackUrl" fit="cover" />
                </div>
              </el-col>
              <el-col :span="24">
                <div class="h5">真实姓名：{{ dialogList.auditContent.realName }}</div>
                <div class="h5">身份证号：{{ dialogList.auditContent.idcardNumber }}</div>
              </el-col>
            </div>
          </el-form-item>

          <!-- ZYZ  职业照 -->
          <el-form-item v-if="dialogList.type === 'ZYZ'">
            <div v-if="JSON.stringify(dialogList.originalContent) !== '{}'">
              <div class="h5">原内容</div>
              <el-col :span="12">
                <div v-if="dialogList.originalContent.zyzUrl" class="block">
                  <el-image :src="dialogList.originalContent.zyzUrl" fit="cover" />
                </div>
              </el-col>
              <!-- <el-col :span="16">
                <div class="block">
                  <div>编号编号</div>
                  <div>级别级别</div>
                </div>
              </el-col>-->
            </div>
          </el-form-item>
          <el-form-item v-if="dialogList.type === 'ZYZ'">
            <div v-if="JSON.stringify(dialogList.auditContent) !== '{}'">
              <div class="h5">审核内容</div>
              <el-col :span="12">
                <div v-if="dialogList.auditContent.zyzUrl" class="block">
                  <el-image :src="dialogList.auditContent.zyzUrl" fit="cover" />
                </div>
              </el-col>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="h5">申请记录</div>
            <ul v-if="dialogList.flowList" class="record">
              <li v-for="(item, index) in dialogList.flowList" :key="index" class="line-height20">
                <div>
                  <span>{{ item.createTime }}</span>
                  <span v-if="item.operation === 'WAITING'">待审核</span>
                  <span v-if="item.operation === 'PASS'">通过</span>
                  <span v-if="item.operation === 'UNPASS'">不通过</span>
                  <span>{{ item.remark }}</span>
                </div>
              </li>
            </ul>
          </el-form-item>

          <el-form-item v-if="isPassStatus">
            <el-input
              v-model="textarea"
              resize="none"
              type="textarea"
              :rows="3"
              placeholder="审核不通过请输入原因"
            />
            <div style="color: red;">请填写不通过原因！</div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getAuditPass(true)">通 过</el-button>
        <el-button @click="getAuditPass(false)">不 通 过</el-button>
        <!-- <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn">保存</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';
import {
  authApplyPage,
  getAuthApplyDetail,
  auditPass
} from '@/api/certification';

export default {
  name: 'List',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      textarea: '',
      isPassStatus: false,
      loading: false,
      listQuery: {
        condition: {
          keyword: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      listData: [],
      total: 0,
      columns: [
        { label: '序号', value: 'index', width: '60px', align: 'center' },
        { label: '审核对象', value: 'applyId', align: 'center' },
        { label: '发起用户', value: 'nickname', align: 'center' },
        { label: '状态', value: 'statusTxt', align: 'center', width: '90px' },
        {
          label: '审核类型',
          value: 'typeTxt',
          width: '90px',
          align: 'center'
        },
        { label: '申请次数', value: 'count', width: '90px', align: 'center' },
        { label: '操作', value: 'todo', align: 'center', width: '90px' }
      ],

      dialogVisible: false,
      dialogList: null
    };
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      this.loading = true;
      authApplyPage(this.listQuery)
        .then(res => {
          if (this.checkArr(res.data.records)) {
            res.data.records.map(item => {
              switch (item.status) {
                case 'WAITING':
                  item.statusTxt = '待审核';
                  break;
                case 'PASS':
                  item.statusTxt = '通过';
                  break;
                case 'UNPASS':
                  item.statusTxt = '不通过';
                  break;
              }

              switch (item.type) {
                case 'STUDENT_CERT':
                  item.typeTxt = '学生证';
                  break;
                case 'TEACHER_CERT':
                  item.typeTxt = '教师证';
                  break;
                case 'TITLE_CERT':
                  item.typeTxt = '职称证';
                  break;
                case 'IDCARD':
                  item.typeTxt = '身份证';
                  break;
                case 'ZYZ':
                  item.typeTxt = '职业照';
                  break;
              }
            });
          }

          this.listData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    resetSearch () {
      this.listQuery = {
        condition: {
          keyword: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      };
      this.init();
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      this.init();
    },
    getDetail (applyId) {
      getAuthApplyDetail({
        applyId: applyId
      }).then(res => {
        this.dialogList = res.data;
        this.dialogVisible = true;
      });
    },
    getUserDetail (id) {
      this.$router.push({
        path: `/user/UserDetails`,
        query: { param: id }
      });
    },
    getAuditPass (isPass) {
      if (!isPass && !this.textarea) {
        this.isPassStatus = true;
        return;
      } else {
        this.isPassStatus = false;
      }

      auditPass({
        applyId: this.dialogList.applyId,
        isPass: isPass,
        remark: this.textarea
      }).then(res => {
        this.resetSearch();
        this.textarea = '';
        this.$message({
          message: '审核成功',
          type: 'success'
        });
        this.dialogVisible = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.record {
  border: 1px solid #ccc;
  padding: 15px 20px;
}
</style>
